<!-- 排行弹窗 -->
<template>
  <n-modal class="tips_sm_modal" :show="show" :mask-closable="false">
    <n-card
      class="form_card"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <div class="form_container vertical">
        <div class="header rel center">
          <span>{{ itemData?.name }}</span>
          <span class="close abs center pointer t-sm" @click="show = false">
            <iconpark-icon
              icon-id="tanctongyguanb"
              color="#fff"
              size="1rem"
            ></iconpark-icon>
          </span>
        </div>
        <div class="main">
          <img :src="itemData.pic_content" alt="" />
          <button class="btn">分享</button>
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import pinia from '@/store/index';
// import { storeToRefs } from 'pinia';
// import { User } from '@/store/user';

// const userInfo = User(pinia);
// const { info } = storeToRefs(userInfo);

defineProps({
  itemData: {
    type: Object,
    default: () => {},
  },
});

const show = ref(false);
const open = () => {
  show.value = true;
};

defineExpose({
  open,
});
</script>

<style lang="less" scoped>
// @import '@/assets/CommonForm.less';
.form_container {
  .header {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid rgba(38, 41, 76, 1);
    font-size: 20px;

    .close {
      right: 20px;
    }
  }
}
.main {
  // height: 400px;
  padding: 20px 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  img {
  }
  .btn {
    margin: 30px auto;
    height: 46px;
    width: 372px;
    border-radius: 12px;
    border: unset;
    color: #ffffff;
    background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
  }
}

// 弹窗提示
.tips_sm_modal {
  &.form_card {
    width: 960px !important;

    :deep(.n-card__content) {
      padding: 0 !important;
    }
  }
}
</style>
